
<template>
  <div class="select-tree-component">
    <FormItemView :selecting="selecting" :value="value.title" @click="handleOpen" />
    <reform-template-input ref="ReformTemplateInputRef" @close="selecting = false" />
  </div>
</template>

<script>
import ReformTemplateInput from './template'
import FormItemView from '@/components/FormItemView/index'
export default {
  name: 'ReformTemplateView',
  components: { ReformTemplateInput, FormItemView },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    optionList: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: () => '请选择'
    },
    title: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      selecting: false
    }
  },
  methods: {
    handleOpen() {
      this.$data.selecting = true
      this.$refs.ReformTemplateInputRef.open(this.$props.value).then(res => {
        this.$emit('input', res)
        this.$emit('change', res)
      }).finally(() => {
        this.$data.selecting = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .content-block {
    max-height: 140px;
    overflow-y: auto;
  }
</style>
